<script lang="ts" setup>
    import { ref } from 'vue'

    const props = defineProps({
        logo: {
            type: String,
            required: true,
        },
        account: {
            type: String,
            required: true,
        },
        menu: {
            type: String,
            required: true,
        },
    })
</script>

<script lang="ts">
    export default {
        methods: {
            goToHome() {
                this.$router.push('/')
            },
            goToAccount() {
                this.$router.push('/account')
            },
            goToEvent() {
                this.$router.push('/events/0')
            },
        }
    }
</script>

<template>
    <el-menu
        class="menu"
        mode="horizontal"
        :ellipsis="false"
    >
        <el-menu-item
            class="logo"
            @click="goToHome"
        >
            <div :style="`background-image: url(${logo})`" class="img" />
            <div class="title">IMPLEO</div>
        </el-menu-item>
        <div class="flex-grow" />
        <el-sub-menu
            collapse-close-icon="none"
            collapse-open-icon="none"
        >
            <template #title>
                <div :style="`background-image: url(${menu})`" class="img menu" />
            </template>
            <el-menu-item @click="goToHome">
                Главная
            </el-menu-item>
            <el-menu-item>
                Специалисты
            </el-menu-item>
            <el-menu-item @click="goToEvent">
                Мероприятия
            </el-menu-item>
            <el-menu-item>
                Статьи
            </el-menu-item>
            <el-menu-item>
                О нас
            </el-menu-item>
        </el-sub-menu>
        <el-menu-item @click="goToAccount">
            <div :style="`background-image: url(${account})`" class="img account" />
        </el-menu-item>
    </el-menu>
</template>

<style lang="sass" scoped>
@import '../assets/styles/main'

.menu
    border: none
    background: none

.el-menu--horizontal .el-menu-item:not(.is-disabled):hover
    background: none
    color: $black
    outline: none
.el-menu--horizontal .el-menu-item:not(.is-disabled):focus
    background: none
    color: $black
    outline: none

.flex-grow
  flex-grow: 1

.img 
    background-repeat: no-repeat
    background-size: contain
    background-position-x: right
    background-position-y: center
    height: 100%
    width: 3em
.menu
    background-size: contain
    background-position-x: left
.account
    background-size: contain
    background-position-x: left
.grid
    padding: 1em
.grid-conten
    min-height: 1em
.title
    font-size: 3em
</style>